<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加员工</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form inline :model="addEmployeeForm" :rules="rules" ref="addEmployeeForm" label-width="100px"
               label-position="right" class="demo-ruleForm">
        <div class="left" style="width: 70%;float: left;overflow: hidden">
          <el-form-item label="工号:" prop="empCode">
            <el-input v-model="addEmployeeForm.empCode"></el-input>
          </el-form-item>

          <el-form-item label="姓名:" prop="empName">
            <el-input v-model="addEmployeeForm.empName"></el-input>
          </el-form-item>
          <el-form-item label="性别:" prop="sex">
            <el-select v-model="addEmployeeForm.sex" placeholder="请选择">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年龄:" prop="age">
            <el-input v-model="addEmployeeForm.age"></el-input>
          </el-form-item>
          <el-form-item label="证件类型:" prop="sex">
            <el-select v-model="addEmployeeForm.idType" placeholder="请选择">
              <el-option label="居民身份证" value="0"></el-option>
              <el-option label="军官证" value="1"></el-option>
              <el-option label="护照" value="2"></el-option>
              <el-option label="外国身份证" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码:" prop="idNum">
            <el-input v-model="addEmployeeForm.idNum"></el-input>
          </el-form-item>
          <el-form-item label="出生日期:" prop="birth">
            <el-date-picker type="date" placeholder="选择日期" v-model="addEmployeeForm.birth"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>

          <el-form-item label="部门:" prop="deptId">
            <el-select v-model="addEmployeeForm.deptId" placeholder="请选择">
              <el-option v-for="d in deptList" :label="d.dname" :value="d.id"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="职位:" prop="pId">
            <el-select v-model="addEmployeeForm.pId"  placeholder="职位">
              <el-option :label="item.pname" :value="item.id" v-for="item in jobList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工类别:" prop="empType">
            <el-select v-model="addEmployeeForm.empType" placeholder="请选择">
              <el-option label="合同工" value="0"></el-option>
              <el-option label="外派" value="1"></el-option>
              <el-option label="实习生" value="2"></el-option>
              <el-option label="计件工" value="3"></el-option>
              <el-option label="服务派遣" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="在职状态:" prop="jobStatus">
            <el-select v-model="addEmployeeForm.jobStatus" placeholder="请选择">
              <el-option label="试用" value="0"></el-option>
              <el-option label="在职" value="1"></el-option>
              <el-option label="退休" value="2"></el-option>
              <el-option label="实习" value="3"></el-option>
              <el-option label="离职" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入职日期:" prop="joinTime">
            <el-date-picker type="date" placeholder="选择日期" v-model="addEmployeeForm.joinTime"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="试用结束日期:" prop="probationPeriodEnd">
            <el-date-picker type="date" placeholder="选择日期" v-model="addEmployeeForm.probationPeriodEnd"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="累计工龄:" prop="workAge">
            <el-input v-model="addEmployeeForm.workAge"></el-input>
          </el-form-item>
          <el-form-item label="工作城市:" prop="jobCity">
            <el-select v-model="addEmployeeForm.jobCity" placeholder="请选择">
              <el-option label="上海" value="上海"></el-option>
              <el-option label="北京" value="北京"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出勤模式:" prop="attendancePatterns">
            <el-select v-model="addEmployeeForm.attendancePatterns" placeholder="请选择">
              <el-option label="标准工时" value="0"></el-option>
              <el-option label="免刷卡" value="1"></el-option>
              <el-option label="弹性工时" value="2"></el-option>
              <el-option label="综合计时" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司邮箱:" prop="companyEmail">
            <el-input v-model="addEmployeeForm.companyEmail"></el-input>
          </el-form-item>
          <el-form-item label="个人邮箱:" prop="personalEmail">
            <el-input v-model="addEmployeeForm.personalEmail"></el-input>
          </el-form-item>
          <el-form-item label="个人手机:" prop="personalPhone">
            <el-input v-model="addEmployeeForm.personalPhone"></el-input>
          </el-form-item>
          <el-form-item label="个人微信:" prop="personalWechat">
            <el-input v-model="addEmployeeForm.personalWechat"></el-input>
          </el-form-item>
          <el-form-item label="创建时间:" prop="insertTime">
            <el-input v-model="addEmployeeForm.insertTime" v-text="new Date().toLocaleString()"></el-input>
          </el-form-item>
          <el-form-item label="创建时间:" prop="updateTime">
            <el-input v-model="addEmployeeForm.updateTime" v-text="new Date().toLocaleString()"></el-input>
          </el-form-item>

        </div>
        <div style="width: 30%;float: right;overflow: hidden">
          <el-form-item prop="avatar">
          <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              name="myHeaderImg"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="uploadHeaders">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          </el-form-item>
          <el-form-item label="固定薪资" prop="salary">
            <el-input v-model="addEmployeeForm.salary"></el-input>
          </el-form-item>
          <el-form-item label="国籍:" prop="country">
            <el-select v-model="addEmployeeForm.country" placeholder="请选择">
              <el-option label="中国" value="中国"></el-option>
              <el-option label="外国" value="外国"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="民族:" prop="nation">
            <el-select v-model="addEmployeeForm.nation" placeholder="请选择">
              <el-option v-for="n in nationList" :label="n.name" :value="n.name"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="血型:" prop="bloodType">
            <el-select v-model="addEmployeeForm.bloodType" placeholder="请选择">
              <el-option label="A" value="A"></el-option>
              <el-option label="B" value="B"></el-option>
              <el-option label="AB" value="AB"></el-option>
              <el-option label="O" value="O"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="政治面貌:" prop="politicsStatus">
            <el-select v-model="addEmployeeForm.politicsStatus" placeholder="请选择">
              <el-option label="群众" value="群众"></el-option>
              <el-option label="共青团员" value="共青团员"></el-option>
              <el-option label="中共党员" value="中共党员"></el-option>
              <el-option label="预备党员" value="预备党员"></el-option>
              <el-option label="无党派人士" value="无党派人士"></el-option>
              <el-option label="其他党派" value="其他党派"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="婚姻状况:" prop="maritalStatus">
            <el-select v-model="addEmployeeForm.maritalStatus" placeholder="请选择">
              <el-option label="未婚未育" value="0"></el-option>
              <el-option label="已婚已育" value="1"></el-option>
              <el-option label="已婚未育" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学历:" prop="education">
            <el-select v-model="addEmployeeForm.education" placeholder="请选择">
              <el-option label="职高" value="0"></el-option>
              <el-option label="高中" value="0"></el-option>
              <el-option label="专科" value="0"></el-option>
              <el-option label="本科" value="1"></el-option>
              <el-option label="硕士" value="1"></el-option>
              <el-option label="博士" value="1"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="text-align: center">
          <el-button type="primary" @click="addEmployee()">立即创建</el-button>
          <el-button @click="resetForm('addEmployeeForm')">重置</el-button>
        </div>

      </el-form>

    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: '',
      swflag: false,
      empList: [],
      total: 9,
      userName: "",
      addEmployeeForm: {},
      rules: {},
      nationList: [],
      deptList:[],
      uploadUrl: this.$HRMSUrl + '/employee/uploadImg',
      uploadHeaders: {
        token: ''
      },
      jobList:[]
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.addEmployeeForm.avatar = res.data;
      console.log(res.data)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    initToken() {
      let t = sessionStorage.getItem("token");
      this.uploadHeaders.token = t;
    },
    submitForm() {
      this.$refs.addEmployeeForm.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.addEmployeeForm.resetFields();
    },


    //添加新的员工
    addEmployee() {
      console.log(this.addEmployeeForm)
      let url = this.$HRMSUrl + "employee/addEmployee"
      this.$axios.post(url, this.addEmployeeForm).then(resp => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.$message({
            type: "success",
            message: resp.data.msg,
            duration: 1000
          })
          this.$router.push("/employee")
        } else {
          this.$message({
            type: "error",
            message: resp.data.msg,
            duration: 1000
          })
        }
      })
    },
    //查询员工用户
    getUserList() {
      let url = this.$HRMSUrl + "/employee/list"
      this.$axios.get(url, {
        params: {
          name: this.userName,
          currentPage: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(res => {
        if (res.data.code === 200) {
          console.log(res)
          this.empList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },

    searchUser() {
      this.pageNum = 1;
      this.getUserList();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getUserList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getUserList();
    },
    initDept(){
      let url = this.$HRMSUrl+"dept/listAllDept";
      this.$axios.get(url).then(res=>{
        if (res.data.code === 200) {
          this.deptList = res.data.data.list;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initPosition(){
      let url = this.$HRMSUrl+"position/initPosition";
      this.$axios.get(url).then(res=>{
        if (res.data.code === 200) {
          this.jobList = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    reloadData() {
      this.searchUser();
      this.initPosition();
      this.$axios.get("/json/nation.json").then(resp => {
        this.nationList=resp.data
      })
      this.initDept();
      this.initToken();

    }
  },
  created() {
    this.reloadData();
  }
};
</script>
<style lang="less" scoped>

.left .el-input {
  width: 221.4px;
}

.left .el-form-item {
  margin-left: 70px;
}

.el-date-editor {
  width: 221.4px !important;
}

.avatar-uploader {
  text-align: center;

}

.avatar-uploader .el-upload {
  border: 1px solid #bc1414 !important;
  border-radius: 6px;

}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>